<template>
  <div>
    <el-container>
      <el-header>
        <!-- 左侧 -->
        <el-menu
          class="el-menu-demo"
          mode="horizontal"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          router
        >
          <el-menu-item index="home">首页</el-menu-item>
          <el-menu-item index="html">HTML</el-menu-item>
          <el-menu-item index="css">CSS</el-menu-item>
          <el-menu-item index="js">JS</el-menu-item>
          <el-menu-item index="node">Node</el-menu-item>
          <!-- 右侧用户 -->
          <el-menu-item style="float:right">
            <el-dropdown>
              <span class="el-dropdown-link">
                <el-avatar
                  size="small"
                  src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
                ></el-avatar>
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="login" @click.native="onUserMessage">
                  {{ userMessage.username ? userMessage.username : "用户名" }}
                </el-dropdown-item>
                <el-dropdown-item
                  @click.native="logout()"
                  command="logout"
                  divided
                >
                  登出
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-menu-item>
        </el-menu>
      </el-header>
      <el-main>
        <el-form ref="form" :model="form" label-width="80px" :rules="rules">
          <el-form-item label="文章标题" prop="title">
            <el-input v-model="form.title"></el-input>
          </el-form-item>
          <el-form-item label="文章类型" prop="type">
            <el-select v-model="form.type" placeholder="请选择活动区域">
              <el-option label="HTML" value="1"></el-option>
              <el-option label="CSS" value="2"></el-option>
              <el-option label="JS" value="4"></el-option>
              <el-option label="Node" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="文章内容" prop="content">
            <el-input
              type="textarea"
              :rows="10"
              v-model="form.content"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit('form')">
              发表文章
            </el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import request from '@/utils/request'
import { publishArticle } from '@/api/publish'

export default {
  data () {
    return {
      form: {
        title: '',
        content: '',
        type: null,
        user: null
      },
      userMessage: {},
      rules: {
        title: [
          {
            required: true,
            message: '文章标题',
            trigger: 'blur'
          },
          {
            min: 2,
            max: 30,
            message: '长度在 2 到 30 个字符',
            trigger: 'blur'
          }
        ],
        content: [
          {
            required: true,
            message: '文章内容',
            trigger: 'blur'
          },
          {
            min: 1,
            max: 1000,
            message: '长度在 3 到 5 个字符',
            trigger: 'blur'
          }
        ],
        type: [
          {
            required: true,
            message: '请选择文章类型',
            trigger: 'change'
          }
        ]
      }
    }
  },
  name: 'sendIndex',
  created () {
    this.userMessage = JSON.parse(window.localStorage.getItem('user'))
    request({
      method: 'GET',
      url: 'http://localhost:3000/userInfo',
      headers: {
        Authorization: this.userMessage.token
      }
    })
      .then(res => {
        // eslint-disable-next-line eqeqeq
        if (res.data.code == '-1') {
          this.$router.push({
            name: 'login'
          })
        }
      })
      .catch(() => {})
  },
  methods: {
    async onSubmit (form) {
      await this.$refs[form].validate()
      this.form.user = JSON.parse(window.localStorage.getItem('user')).username
      var artData = this.form
      publishArticle({ artData })
        .then(() => {
          console.log('发表成功')
          this.$router.push({
            name: 'userIndex'
          })
        })
        .catch(() => {
          console.log('发表失败')
        })
    },
    onUserMessage () {
      this.$router.push({
        name: 'userIndex'
      })
    },
    // 登出选项
    logout () {
      window.localStorage.removeItem('user')
      // userMessage = "用户名";
      this.$router.push({
        name: 'login'
      })
    }
  }
}
</script>
<style>
body {
  background-color: rgb(188, 255, 233);
}
.el-main {
  width: 85%;
  margin: 0 auto;
}
</style>
